<template>
    <div class="index-container">
        <!-- 导航栏 -->
        <indexNavTeam
            @click-left="$router.go(-1)"
            :teamOption="teamOption"
            @confirm="handleTeamCfm"
        ></indexNavTeam>

        <!-- 车队名称 -->
        <!-- <p class="team-name">XXXX - 车队名称</p> -->

        <div class="team-list team-list-first" @click="$router.push({name: 'autoList'})">
            <p class="team-list-name">车辆列表</p>
            <p class="team-list-number">车辆数<span>{{teamInfo.autoCount}}</span></p>
        </div>
        <div class="team-list team-list-driver" @click="$router.push({name: 'driverList'})">
            <p class="team-list-name">司机列表</p>
            <p class="team-list-number">司机数<span>{{teamInfo.truckerCount}}</span></p>
        </div>
    </div>
</template>

<script>
import indexNavTeam from '../../components/index-nav-team/index-nav-team.vue'
import pageConfig from './page-config'

export default {
    components: {
        indexNavTeam
    },
    data () {
        return {
            title: pageConfig.title,
            queryParameter: {
                teamNo: ''
            },
            teamInfo: [],
            teamOption: [{ no: '', text: '全部车队' }],
        }
    },
    mounted () {
        setTimeout(async () => {
            // await this.getTeamOption()
            this.getTeamInfo()
        }, 50)
        this.showItem()
    },
    methods: {
        /* 获取车辆、司机数*/
        async getTeamInfo () {
            let _ = this
            _.$U.showLoading(_)
            _.queryParameter.teamNo = this.$store.state.selTeam.teamNo
            try {
                const { data: res } = await _.$H.get(_, _.$A.team.appCalc, _.queryParameter)
                _.teamInfo = res
                _.$U.hideLoading(_)
            } catch (e) {
                _.$U.hideLoading(_)
            }
        },

        /** 车队下拉*/
        async getTeamOption () {
            let _ = this
            try {
                const res = await _.$H.get(_, _.$A.team.findAppTeamList, {})
                if (res.status == 200) {
                    for (let v of res.data) {
                        let obj = {
                            no: v.teamNo,
                            text: v.teamName
                        }
                        _.teamOption.push(obj)
                    }
                }
                if (_.$store.state.selTeam == '') {
                    this.$store.commit('setSelTeam', { teamName: _.teamOption[0].text, teamNo: _.teamOption[0].no })
                }
            } catch (e) {
                _.$toast.fail(e.msg)
            }
        },

        /* 选中车队 */
        handleTeamCfm (val) {
            this.queryParameter.teamNo = val.teamNo
            this.getTeamInfo()
        }
    }
}
</script>

<style lang="less" scoped>
.team-name {
    height: 33px;
    line-height: 33px;
    margin: 0 0 42px 0;
    padding: 0 26px;
    font-size: 24px;
    font-weight: 600;
    color: #2D3748;
}
.team-list {
    width: calc(100% - 52px);
    height: 145px;
    margin: 0 26px 20px 26px;
    padding: 19px 23px;
    box-sizing: border-box;
    border-radius: 17px;
    box-shadow: 0px 2px 15px 0px rgba(45,55,72,0.11);
    background: url("../../assets/team/auto.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .team-list-name {
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
    }
    .team-list-number {
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 400;
        span {
            margin-left: 5px;
        }
    }
}
.team-list-first {
    margin-top: 42px;
}
.team-list-driver {
    background: url("../../assets/team/driver.png") no-repeat center;
    background-size: 100% 100%;
}
</style>
